<template>
	<page  ref='page'>
		<!-- 商品详情 wwl -->
		<view class="page">
			<view class="list_info">
				
				<view class="row_info">
					<view class="left">
						标题
					</view>
					<input type="text" maxlength="30" class="right_input" v-model="info.title" 
						placeholder="请输入标题" placeholder-style="color:#D5D5D5;font-size:28rpx" />
				</view>
				
				
				<picker @change="changeType2"   range-key='name' :value='typeList2.findIndex(x=>x.id == info.standard_nav_id) == -1 ? null : typeList2.findIndex(x=>x.id == info.standard_nav_id)' :range="typeList2" >
					 <view class="row_info2">
						<text class="left">信息分类</text>
						<view class="right">
							<text class="right_text" v-if="info.standard_nav_id">{{typeList2.find(x=>x.id == info.standard_nav_id).name}}</text>
							<text class="right_text right_text2" v-else>请选择信息分类</text>
							<n-icon name="right" size="32" color='#d5d5d5' style='margin-left: 5rpx;'></n-icon>
						</view>
					 </view>
				</picker>
				<view class="row_info1 row" style="border-bottom:0;">
					<view class="left">
						展示图片(最多上传6张)
					</view>
					<view class="right4 text2" style="text-align: right;">
						{{info.picture_list ? info.picture_list.length : 0}}/6
					</view>
				</view>
				<view class="img_list">
					<block v-if='info.picture_list && info.picture_list.length > 0' >
						<view class="img_row" v-for="(row,i) in info.picture_list" :key='i'>
							<image :src="row" class="img" mode="scaleToFill"></image>
							<view class="icon"  @click='onDelete(c,i)'>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/close.png" mode="scaleToFill"></image>
							</view>
						</view>
					</block>
					<view class="img_row" @click='setPhoto(1)' v-if="!info.picture_list || info.picture_list.length < 6">>
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/upload01.png" mode="scaleToFill" class="img"></image>
					</view>
				</view>	
				
				<!-- <view class="row_info1">
					<view class="left">
						商品展示图片
					</view>
				</view>
				<view class="row_image" @click="setPhoto(1)">
					<image class="image" :src="info.yy_zz" mode="scaleToFill" v-if='info.yy_zz'></image>
					<view class="upload_box" v-else>
						<n-icon name="add1" size="40" color="#919191"></n-icon>
						<text>上传照片</text>
						</block>
					</view>
				</view> -->
				<view class="row_info1">
					<view class="left">
						信息详情
					</view>
				</view>
				<view class="row_image" >
					<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @blur="onEditorReadyshiqu" ></editor>
				</view>
				
			</view>
			<view class="button_box" v-if='status == 1 || status == 2'>
				<button class="button" :class="theme" @click='onSave()' :loading="loading">提交审核</button>
			</view>
		</view>
	</page>
</template>

<script>
	import {getStandardInfo,getStandardNav} from "../static/api.js"
	import { getbuildingMaterialsCityType,getCityName,getTabList,getFindCraftsman } from "@/utils/getRequest.js"
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default {
		data() {
			return {
				placeholder: '开始输入...',
				
				status:null,
				id:null,
				typeList1:[],
				typeList2:[],//商品分类列表
				loading:false,
				rightContent:[],//商品分类列表
				info:{
					title:'',
					standard_nav_id:0,//商品店铺ID也代表分类
					picture_list:[],//商品图
					sf_img:'',
					content:'',
					type:2,
					// service_scope:''
				},
				page:1,
				size:100,
			}
		},
		methods: {
			//富文本编辑器初始化
			onEditorReady() {
			    // #ifdef MP-BAIDU
			    this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
			    // #endif
			    
			    // #ifdef APP-PLUS || H5 ||MP-WEIXIN
			    uni.createSelectorQuery().select('#editor').context((res) => {
			      this.editorCtx = res.context
			    }).exec()
			    // #endif
			},
			//富文本编辑器失去焦点触发
			onEditorReadyshiqu(e) {
				console.log(e,'详情')
			    this.info.content = e.detail.html;
			},
			//固定获取发布新闻普通用户分类
			async getjccPicsCate (id) {
				console.log(id,'信息分类2')
				var res = await getStandardNav({type: this.info.type})
				console.log(res,'信息分类')
				this.typeList2 = res;
				
			},
			async onSave(){
				if(this.loading) return
				
				if (!this.$regular.funShowToast(null, this.info.title , '请输入商品名称！')) return false
				if (!this.$regular.funShowToast(null, this.info.content , '请输入信息详情！')) return false
				if (!this.$regular.funShowToast(null, this.info.standard_nav_id , '请选择信息分类！')) return false
				if(this.info.picture_list.length == 0){
					uni.showToast({
						title: '请上传商品图片，最少一张',
						icon:'none',
						duration: 2000,
						mask:true
					});
					return false
				}
				
				this.loading = true
				uni.showLoading({mask: false})
				try{
					if(this.status == 1){
						console.log('新增')
						var res = await getStandardInfo(this.info)
					}else{
						console.log('编辑')
						var res = await getStandardInfo({...this.info,id:this.id,status:3})
					}
					this.loading = false
					uni.hideLoading()
					if(res.code == 200){
						// this.$global.$editUploadBack(1,'shopList')
						uni.showToast({title:res.msg,duration: 2000})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else{
						uni.showToast({title:res.msg,duration: 2000,icon:'none'})
					}
					
				}catch{
					this.loading = false
					uni.hideLoading()
				}
				
			},
			
			
			changeType2(e){
				this.info.standard_nav_id = this.typeList2 && this.typeList2.length > 0 ? this.typeList2[e.detail.value].id : ''
			},
			//删除图片
			onDelete(c, i) {
				this.info.picture_list.splice(i, 1)
			},
			//上传图片
			setPhoto() {
				uni.chooseImage({
					count: 6 - this.info.picture_list.length, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({mask: false})
						this.allloading = true
						for(let i = 0 ; i <res.tempFilePaths.length ;i++){
							this.$upload(res.tempFilePaths[i]).then(result =>{
								if(result.code == 200){
									this.info.picture_list.push(result.data.img)
									if(i== res.tempFilePaths.length-1 ){
										this.allloading = false
										this.$forceUpdate()
										uni.hideLoading()
									}
								}
							})
							
						}
						
					}
				});
			},
			
			
			
			//查询当前商品
			async getInfo(){
				uni.showLoading()
				try{
					var res = await getStandardInfo({id:this.id,status:this.status})
					this.info = res.data
					this.editorCtx.setContents({
						'html': res.data.content,
						success:  (res)=> {
							console.log(res,"res")
						},
						fail:(err)=> {
							console.log(err,"err")
						}
					})
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			}
		},
		computed: {
			...mapGetters('theme', ['theme']),
			...mapState(['theme']),
			
		},
		onLoad(params) {
			this.status = params.status
			this.id = params.id
			if(params.type) this.info.type = params.type;
			if(this.status != 1) this.getInfo()
			
			this.getjccPicsCate()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		padding-bottom: 180rpx;
	}

	.list_info {
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;

		.row_info2 {
			padding: 28rpx 0;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color: #26252A;
			display: flex;
			justify-content: space-between;
			.left {
				line-height: 40rpx;
			}

			.right {
				width: calc(100% - 7em);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.right_text {
					width: calc(100% - 20rpx);
					text-align: right;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.right_text2 {
					width: calc(100% - 20rpx);
					color: #D5D5D5;
				}
			}
		}

		.row_info {
			padding: 28rpx 0;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color: #26252A;
			display: flex;
			justify-content: space-between;

			.left {
				line-height: 40rpx;
			}

			.right {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.right_input {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				color: #26252A;
				line-height: 40rpx;
			}
		}
		.row_info3{
			.left {
				align-self: center;
			}
			align-items: center;
			.right_logo {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.logo{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.right_text{
				color:#d5d5d5
			}
		}
		.row_info1 {
			padding: 28rpx 0;
			font-size: 28rpx;
			color: #26252A;
		}

		.row_image {
			width: 100%;
			height: 414rpx;
			background: #ffffff;
			border: 2rpx dashed #d5d5d5;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.image {
				width: 100%;
				height: 414rpx;
			}
			.upload_box{
				width: 100%;
				height: 414rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					display: inline-block;
					margin-top: 30rpx;
					font-size: 28rpx;
					color:#919191
				}
			}
		}
	}

	.button_box {
		padding: 30rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		z-index: 9;
	}

	.button {
		width: 674rpx;
		margin: 0 auto;
		height: 88rpx;
		line-height: 88rpx;
		// background: linear-gradient(270deg, #ff7a1f, #ff9760);
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
	
	
	.row {
		width: 100%;
		padding: 40rpx 40rpx 8rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		.left {
			font-size: 30rpx;
			line-height: 44rpx;
			color: #121212;
			font-weight: 500;
		}
		.right {
			width: calc(100% - 5em);
		}
	
		.right_input {
			width: 100%;
			text-align: end;
		}
	
		.right3 {
			width: calc(100% - 5em);
			display: flex;
			flex-wrap: wrap;
		}
		
		.right4 {
			width: calc(100% - 18em);
		}
	
		.row_key {
			display: flex;
			align-items: flex-end;
	
			.text_type {
				width: 40rpx;
				text-align: center;
			}
	
			text {
				margin: 0rpx 10rpx;
			}
		}
	
		.right2 {
			display: flex;
			justify-content: space-between;
			.iconfont{
				line-height: 22px;
			}
			
			>view:nth-child(1) {
				width: calc(100% - 40rpx);
				text-align: right;
			}
		}
	}
	.img_list{
		display: flex;
		flex-wrap: wrap;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
		.img_row{
			width: 156rpx;
			height: 156rpx;
			margin-right: 16rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 156rpx;
				height: 156rpx;
			}
			.icon{
				position: absolute;
				right: -16rpx;
				top:-16rpx;
				z-index: 1;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
	
	.container {
			padding: 10px;
		}
	
		#editor {
			width: 100%;
			height: 207px;
			background-color: #CCCCCC;
		}
</style>
